<template>
    <div class="catalog-staffing">
        <a-card style="margin-bottom: 10px">
            <a-form layout="inline" :model="queryFormData">
                <a-form-item label="目录编码：">
                    <a-input
                        style="width: 200px"
                        v-model:value="queryFormData.catalogbm"
                    ></a-input>
                </a-form-item>
                <a-form-item label="目录名称：">
                    <a-input
                        style="width: 200px"
                        v-model:value="queryFormData.catalogmc"
                    ></a-input>
                </a-form-item>
                <a-form-item label="目录类别：">
                    <a-select
                        v-model:value="queryFormData.cataloglx"
                        style="width: 200px"
                        @change="Typechange"
                    >
                        <a-select-option value="">所有</a-select-option>
                        <a-select-option value="1">基础目录</a-select-option>
                        <a-select-option value="2">主题目录</a-select-option>
                        <a-select-option value="3">部门目录</a-select-option>
                    </a-select>
                </a-form-item>
                <!-- <a-form-item label="编制方式：">
          <a-select
            v-model:value="queryFormData.configtype"
            style="width: 200px"
            @change="AuthorizedChage"
          >
            <a-select-option value="">所有</a-select-option>
            <a-select-option value="1">手动</a-select-option>
            <a-select-option value="2">自动</a-select-option>
          </a-select>
        </a-form-item> -->
                <a-form-item>
                    <a-button
                        type="primary"
                        style="margin-right: 4px"
                        @click="Search"
                    >
                        搜索
                    </a-button>
                    <a-button @click="Reset('queryFormData')"> 重置 </a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-card style="margin-bottom: 10px">
            <div style="margin-bottom: 10px">
                <a-button style="margin-right: 10px" @click="AddCatalog">
                    新增</a-button
                >
            </div>
            <a-table
                :rowKey="(record) => record.id"
                :defaultExpandAllRows="true"
                :columns="columns"
                :data-source="treeList"
            >
                <template #cataloglen> 自动</template>
                <template #operation="{ record }">
                    <a-space>
                        <a-button
                            size="small"
                            type="link"
                            @click="Rectify(record)"
                            >编辑</a-button
                        >
                        <a-popconfirm
                            title="确定删除这条数据吗？"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onDel(record)"
                        >
                            <a-button size="small" type="link">删除</a-button>
                        </a-popconfirm>
                    </a-space>
                </template>
            </a-table>
        </a-card>
        <!-- 新增 -->
        <a-modal
            v-model:visible="visible"
            title="添加目录分类编制"
            ok-text="确定"
            cancel-text="取消"
        >
            <div class="flex justify-content-center">
                <a-form
                    :model="FormData"
                    :rules="rules"
                    label-align="right"
                    :label-col="{ span: 5 }"
                >
                    <a-form-item
                        label="目录名称："
                        ref="catalogmc"
                        name="catalogmc"
                    >
                        <a-input
                            style="width: 300px"
                            v-model:value="FormData.catalogmc"
                            placeholder="请输入目录名称"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="上级目录："
                        ><a-tree-select
                            v-model:value="FormData.parentid"
                            tree-data-simple-mode
                            show-search
                            style="width: 300px"
                            :dropdown-style="{
                                height: '400px',
                                overflow: 'auto',
                            }"
                            placeholder="请输入查询关键词"
                            :tree-data="treeSelector"
                            @change="treeChange"
                        >
                        </a-tree-select>
                    </a-form-item>
                    <a-form-item label="备注：">
                        <a-textarea
                            style="width: 300px"
                            v-model:value="FormData.bz"
                        ></a-textarea>
                    </a-form-item>
                </a-form>
            </div>
            <template #footer>
                <a-button @click="visible = false">取消</a-button>
                <a-button type="primary" @click="handleOk">确认</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import * as API from "@/api/data-object";
import { buildtree, isLeaf, shu } from "../../utils";
import { message } from "ant-design-vue";
const columns = [
    {
        title: "目录编码",
        dataIndex: "catalogbm",
        key: "catalogbm",
    },
    {
        title: "目录名称",
        dataIndex: "catalogmc",
        key: "catalogmc",
    },
    {
        title: "目录层级",
        dataIndex: "cataloglen",
        key: "cataloglen",
    },
    {
        title: "编制方式",
        dataIndex: "cataloglen",
        key: "cataloglen",
        slots: { customRender: "cataloglen" },
    },
    {
        title: "上级目录",
        dataIndex: "parentmc",
        key: "parentmc",
    },
    {
        title: "编制值",
        dataIndex: "configvalue",
        key: "configvalue",
    },
    {
        title: "创建时间",
        dataIndex: "createdate",
        key: "createdate",
    },
    {
        title: "操作",
        key: "operation",
        align: "center",
        slots: { customRender: "operation" },
    },
];
export default {
    data() {
        return {
            columns,
            queryFormData: {
                catalogbm: "",
                catalogmc: "",
                cataloglx: "",
            },
            FormData: {
                catalogmc: undefined,
                cataloglen: undefined,
                parentid: undefined,
                parentmc: undefined,
                configtype: undefined,
                bz: undefined,
                id: undefined,
            },
            rules: {
                catalogmc: [
                    {
                        required: true,
                        message: "请输入目录名称",
                        trigger: "blur",
                    },
                ],
            },
            verify: true,
            visible: false,
            treeList: [],
            treeSelector: [],
            FtreeSelector: [],
            edit: false,
        };
    },
    watch: {
        visible(val, oldval) {
            if (val == false) this.Reset("FormData");
        },
    },
    created() {},
    mounted() {
        this.Search();
    },
    methods: {
        AddCatalog() {
            this.visible = true;
            API.getUrlDataApi("/catalog/configration/treeData").then((res) => {
                this.treeSelector = buildtree(res, "pId", "id");
                isLeaf(this.treeSelector);
            });
        },
        // 修改
        Rectify(item) {
            API.getUrlDataApi("/catalog/configration/treeData").then((res) => {
                this.treeSelector = buildtree(res, "pId", "id");
                isLeaf(this.treeSelector);
            });
            // http://145.64.10.33:8070/sde/catalog/configration/edit
            this.visible = true;
            this.FormData.cataloglen = item.cataloglen;
            this.FormData.catalogmc = item.catalogmc;
            this.FormData.parentmc = item.parentmc;
            this.FormData.parentid = item.parentid;
            this.FormData.parentid = item.parentid;
            this.FormData.bz = item.bz;
            this.FormData.id = item.id;
            this.edit = true;
        },
        // 增/改
        handleOk() {
            let URL = this.edit
                ? "/catalog/configration/edit"
                : "/catalog/configration/add";
            let postData = this.edit
                ? {
                      bz: this.FormData.bz,
                      cataloglen: this.FormData.cataloglen,
                      catalogmc: this.FormData.catalogmc,
                      parentid: this.FormData.parentid,
                      configtype: 2,
                      parentmc: this.FormData.parentmc,
                      id: this.FormData.id,
                  }
                : {
                      bz: this.FormData.bz || "",
                      cataloglen: this.FormData.cataloglen || "",
                      catalogmc: this.FormData.catalogmc || "",
                      parentid: this.FormData.parentid || "",
                      configtype: 2,
                      parentmc: this.FormData.parentmc || "",
                  };
            API.postUrlDataApi(URL, postData).then((res) => {
                if (res.code == 0) {
                    this.Search();
                    message.success(`${res.msg}`);
                } else {
                    message.error(`${res.msg}`);
                }
            });
            this.edit = false;
            this.visible = false;
        },
        // 删除
        onDel(row) {
            API.getUrlDataApi(`/catalog/configration/remove/${row.id}`).then(
                (res) => {
                    if (res.code == 0) {
                        message.success(`${res.msg}`);
                    } else {
                        message.error(`${res.msg}`);
                    }
                    this.Search();
                }
            );
        },
        // 搜索
        Search() {
            API.postUrlDataApi("/catalog/configration/list", {
                catalogbm: this.queryFormData.catalogbm,
                catalogmc: this.queryFormData.catalogmc,
                cataloglx: this.queryFormData.cataloglx,
                configtype: "",
            }).then((res) => {
                if (
                    this.queryFormData.catalogbm == "" &&
                    this.queryFormData.catalogmc == "" &&
                    this.queryFormData.cataloglx == ""
                ) {
                    this.treeList = buildtree(res, "parentid", "id");
                } else {
                    this.treeList = res;
                }
            });
        },
        // 重置
        Reset(name) {
            Object.keys(this[name]).forEach((key) => {
                this[name][key] = "";
            });
        },
        Typechange(val) {
            this.queryFormData.cataloglx = val;
        },
        treeChange(val, lable, extra) {
            if (val === undefined) {
                return;
            }
            this.FormData.parentid = val;
            this.FormData.parentmc = lable[0];
            this.FormData.cataloglen =
                Math.floor(extra.triggerNode.pos.length / 2) - 1;
        },
    },
};
</script>

<style lang="less" scoped>
.flex {
    display: flex;
}
.justify-content-center {
    justify-content: center;
}
.catalog-staffing:deep(.ant-space-item) {
    width: 100%;
}
.catalog-staffing:deep(.ant-form) {
    width: 100%;
}
</style>